console.log('hello threejs!');

import * as THREE from 'three'

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000)

const renderer = new THREE.WebGLRenderer({alpha:true});// alpha:true 背景透明
renderer.setSize(window.innerWidth,window.innerHeight)
document.body.appendChild(renderer.domElement)


camera.position.z = 5;
function createCube(x=0,y=0,z=0) {
    // Box几何体 (形状)
    const geometry = new THREE.BoxGeometry(2,2,0)
    // 颜色材质
    const material = new THREE.MeshBasicMaterial({color:0xff0000})
    // 网格
    const cube = new THREE.Mesh(geometry,material)
    scene.add(cube)
    cube.position.x = x
    cube.position.y = y
    cube.position.z = z
}
createCube()
createCube(3,2,)
createCube(-3,-2,)

function drawLine(points:THREE.Vector3[],color=0x00ff00) {
    // 顶点几何体 (形状)
    const geometry = new THREE.BufferGeometry().setFromPoints(points)
    // 材质
    const material = new THREE.LineBasicMaterial({color})
    // 线
    const line = new THREE.Line(geometry,material)
    
    scene.add(line)

}
drawLine([
    new THREE.Vector3(- 2, 0, 0),
    new THREE.Vector3( 0, 2, 0 ),
    new THREE.Vector3( 2, 0, 0 ),
])
export default function animate() {
    requestAnimationFrame(animate)
    // cube.rotation.x += 0.01
    // cube.rotation.y += 0.01
    // cube.rotation.z += 0.01
    renderer.render(scene,camera)
}

console.log('finish!');
